<template>
  <div class = "elmain">
    <div class = "cebian">
        <ul>
           <li>首页
             <router-link to="/"  >
            <p class="sai"></p>
             </router-link >
            </li>

            <li>新闻
            <router-link to="/news"  >
            <p class="shou"></p>
            </router-link >
            </li>

          <li>球队
            <router-link to="/team"  >
            <p class="dui"></p>
            </router-link >
            </li>
          <li>球员
            <router-link to="/player"  >
            <p class="yuan"></p>
             </router-link >
          </li>

          <!-- <li>顶部
            <p class="ding"></p>
          </li> -->
        </ul>
    </div>
  <div class="saicheng">
    <div class="wai">
   <ul id="b">
     <div class="lei">
             
               <li v-for="match in newMatchs" :key="match.id">
                <p id = "len" style= "display:none">{{len}}</p>
                 <span id="data" style="top:-55px;left:10px;" >{{dateFormat(match.matchDate)}}</span>
                 <span id="status" style="top:-55px;right:10px;" >
                      {{ match.matchStatus==0?'未开始':(match.matchStatus==1?'比赛中':'已结束')}} <!-- 得到每行的值进行判断  ===类型也匹配-->
                  </span>
                 <span id="homeTeam" style="top:-10px;left:10px;" >{{match.home}}</span>
                  
                 <span id="homeScore" style="top:-10px;right:20px;" >{{match.homeScore}}</span>
                 <span id="awayTeam" style="top:30px;left:10px;" >{{match.away}}</span>
                 <span id="awayScore" style="top:30px;right:20px;"  >{{match.awayScore}}</span>
              </li>
               <li v-for="num in 10" :key="num.index">
                 <span id="data" style="top:-55px;left:10px;" >暂无比赛</span>
                 <span id="status" style="top:-55px;right:10px;" >
                     未开始 <!-- 得到每行的值进行判断  ===类型也匹配-->
                  </span>
                 <span id="homeTeam" style="top:-10px;left:10px;" >待定</span>
                   
                 <span id="homeScore" style="top:-10px;right:20px;" >-</span>
                 <span id="awayTeam" style="top:30px;left:10px;" >待定</span>
                 <span id="awayScore" style="top:30px;right:20px;"  >待定</span>
               </li> 
            
    </div>     
    </ul>
    </div>
     <div class="swiper-button-prev swiper-button-gray" id = "prev"></div>
      <div class="swiper-button-next swiper-button-gray" id = "next"></div>
  </div>

 
  <div class="left">
    <div class = "banner">
      <div v-swiper:mySwiper="swiperOption"  class="bann">

          <div class="swiper-wrapper">

          <div class="swiper-slide">
           <img src="../assets/banner3.jpg" alt="">
          </div>
          <div class="swiper-slide">
             <img src="../assets/banner1.jpg" alt="">
          </div>

          <div class="swiper-slide">
           <img src="../assets/banner2.jpg" alt="">
          </div>

       
         </div>
         <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
         <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
   
    </div>
    </div>
   
    <div class="news">
     <div class= "newshead">
      <p>热门新闻</p>
      <span @click="morenews()"><i class="el-icon-right">更多</i></span>
  
      </div>
      <ul>
        <li @click="intonews(news.id)"  v-for="news in todayNews" :key="news.id" :class="{newsStyle:news.type != 0} ">
          {{news.title}}
        </li>
      </ul>
    </div>
    </div>
    <div class="paiming">
      <span id="dongbu">东部</span>
      <span id="xibu">西部</span>
      <br>
      <hr class="bb">
      <hr class="aa">
      <el-table id="dong"
      :data="dongzhanji"
      style="width: 100%;margin-top:-10px;  cursor: pointer;"
       @row-click="clickData">
      <el-table-column
        prop="sort"
        label="排名">
      </el-table-column>
      <el-table-column
        prop="name"
        label="球队">
      </el-table-column>
      <el-table-column
        prop="win"
        label="胜">
      </el-table-column>
      <el-table-column
        prop="fail"
        label="负">
      </el-table-column>
      <el-table-column
        prop="rate"
        label="胜率">
      </el-table-column>
    </el-table>
    <el-table id="xi"
      :data="xizhanji"
      style="width: 100%;margin-top:-10px;  cursor: pointer;"
       @row-click="clickData">
      <el-table-column
        prop="sort"
        label="排名">
      </el-table-column>
      <el-table-column
        prop="name"
        label="球队">
      </el-table-column>
      <el-table-column
        prop="win"
        label="胜">
      </el-table-column>
      <el-table-column
        prop="fail"
        label="负">
      </el-table-column>
      <el-table-column
        prop="rate"
        label="胜率">
      </el-table-column>
    </el-table>
    </div>
    <img src="../assets/ad1.jpg" alt="" style="margin-top:1150px;width:80%">

    <div class="shuju">
      <p class="shujuhead">数据榜 <span></span></p>
      <ul class="shujua">
        <li><img src="../assets/deifeng.png" alt=""></li>
        <li v-for="score in scoreList" :key="score.index">
          <p style="margin-top:15px;font-size:18px;margin-left:-10px">{{score.sort}}</p>
          <img :src="score.cover" alt="" class="sortimg">
          <p style="font-size:14px;left:60px;top:15px">{{score.name}}</p>
          <p style="color:#d33556;font-size:24px;right:25px;top:10px">{{score.sortVo}}</p>
        </li>
      </ul>
      <ul class="shujua">
        <li><img src="../assets/lanban.png" alt=""></li>
            <li v-for="rebound in reboundsList" :key="rebound.index">
          <p style="margin-top:15px;font-size:18px;margin-left:-10px">{{rebound.sort}}</p>
          <img :src="rebound.cover" alt="" class="sortimg">
          <p style="font-size:14px;left:60px;top:15px">{{rebound.name}}</p>
          <p style="color:#d33556;font-size:24px;right:25px;top:10px">{{rebound.sortVo}}</p>
        </li>
      </ul>
      <ul class="shujua">
        <li><img src="../assets/zhugong.png" alt=""></li>
            <li v-for="assists in assistsList" :key="assists.index">
          <p style="margin-top:15px;font-size:18px;margin-left:-10px">{{assists.sort}}</p>
          <img :src="assists.cover" alt="" class="sortimg">
          <p style="font-size:14px;left:60px;top:15px">{{assists.name}}</p>
          <p style="color:#d33556;font-size:24px;right:25px;top:10px">{{assists.sortVo}}</p>
        </li>
      </ul>
      <ul class="shujua">
        <li><img src="../assets/qiangduan.png" alt=""></li>
        <li v-for="steals in stealsList" :key="steals.index">
          <p style="margin-top:15px;font-size:18px;margin-left:-10px">{{steals.sort}}</p>
          <img :src="steals.cover" alt="" class="sortimg">
          <p style="font-size:14px;left:60px;top:15px">{{steals.name}}</p>
          <p style="color:#d33556;font-size:24px;right:25px;top:10px">{{steals.sortVo}}</p>
        </li>
      </ul>
      <ul class="shujua">
        <li><img src="../assets/gaimao.png" alt=""></li>
          <li v-for=" block in blockedShotsList" :key=" block.index">
          <p style="margin-top:15px;font-size:18px;margin-left:-10px">{{ block.sort}}</p>
          <img :src=" block.cover" alt="" class="sortimg">
          <p style="font-size:14px;left:60px;top:15px">{{ block.name}}</p>
          <p style="color:#d33556;font-size:24px;right:25px;top:10px">{{ block.sortVo}}</p>
        </li>
      </ul>
    </div>
    
  </div>
</template>

<script>
import $ from 'jquery'
import index from '@/api/index'
import moment from 'moment'
  export default {
    data() {
      return {
         swiperOption: {
        autoplay:true,
        //配置分页
        pagination: {
          el: '.swiper-pagination'//分页的dom节点
        },
        //配置导航
        navigation: {
          nextEl: '.swiper-button-next',//下一页dom节点
          prevEl: '.swiper-button-prev'//前一页dom节点
        }
      },

      newMatchs:[],
      len:0,
      dongzhanji:[],
      xizhanji:[],
      todayNews:[],
      scoreList:[],
      blockedShotsList:[],
      assistsList:[],
      stealsList:[],
      reboundsList:[],
      
      };
    },
    mounted () {
    // jq代码写在mounted 里面
    $(function () {
        var a = 1
        var b;
      $('#next').click(function(){
              b = $('#len').text()
              if((b-5*a)>0){
                 $('#b').animate({marginLeft: '-=1060' }, 500);
                   a++;
              }else{
                   $('#next').css("cursor", "not-allowed");
              }
             
            
              if(a!=1){
                 $('#prev').css("cursor", "pointer");
              }
      })

       $('#prev').click(function(){
         if(a==1){
            $('#prev').css("cursor", "not-allowed");
         }else{
            $('#b').animate({marginLeft: '+=1060' }, 500);
            a--;
         }
         
          $('#next').css("cursor", "pointer");
          
      })

      $("#dongbu").hover(function(){
        $("#xi").css("display", "none");
        $("#dong").css("display", "block");
        $(this).css("color","rgb(0,107,183)")
        $("#xibu").css("color","black")
        $(".aa").css("margin-left","0px")
         $(".aa").css("background-color","rgb(0,107,183)")
      })
       $("#xibu").hover(function(){
        $("#dong").css("display", "none");
        $("#xi").css("display", "block");
        $(this).css("color","red")
        $("#dongbu").css("color","black")
        $(".aa").css("margin-left","50%")
        $(".aa").css("background-color","red")
      })
    })
  },
  created(){
       this.getnewmatch()
       this.getdongzhanji()
       this.getxizhanji()
       this.gettodayNews()
       this.getSortByscore()
       this.getSortByrebounds()
       this.getSortByassists()
       this.getSortByblockedShots()
       this.getSortBysteals()
  },
    methods: {
        clickData(row, event, column) {   
　　　　　　 this.$router.push({ path:'/team/'+row.id  })
       },
      morenews(){
            this.$router.push({ path:'/news/' })
      },
      intonews(id){
        this.$router.push({ path:'/news/'+id })
      },
      dateFormat(date){
        if(date == undefined){return ''};
        return moment(date).format("MM-DD")
      },
      getnewmatch(){
       index.getnewmatch()
       .then(response => {
          // this.newMatchs = response.data.data.matchs
         this.newMatchs = response.data.matchs
         this.len = this.newMatchs.length
       })
      },
      getdongzhanji(){
        index.getdongzhanji()
        .then(response => {
          this.dongzhanji = response.data.dongzhanji
        })
      },
       getxizhanji(){
        index.getxizhanji()
        .then(response => {
          this.xizhanji = response.data.xizhanji
        })
      },
      gettodayNews(){
        index.gettodayNews()
        .then(response => {
          this.todayNews = response.data.news
        })
      },
      getSortByscore(){
        index.getSortbyVO('score').
        then(response => {
          this.scoreList = response.data.list
         
        })
      },
       getSortByrebounds(){
        index.getSortbyVO('rebounds').
        then(response => {
          this.reboundsList = response.data.list
        })
      },
       getSortByassists(){
        index.getSortbyVO('assists').
        then(response => {
          this.assistsList = response.data.list
        })
      },
       getSortByblockedShots(){
        index.getSortbyVO('blocked_shots').
        then(response => {
          this.blockedShotsList = response.data.list
        })
      },
       getSortBysteals(){
        index.getSortbyVO('steals').
        then(response => {
          this.stealsList = response.data.list
        })
      },
    }
  }
</script>

<style>
  .elmain {
    color: #333;
    text-align: center;
    width: 100%;
    min-height: 1000px;
    position:relative;
    background-color: white;
  }
  .cebian{
    width: 100px;
    border-radius: 10px;
    height: 350px;
    background-color: #F2F6FC;
    position: fixed;
    right: -10px;
    top:20%;
  
  }
  .cebian ul{
    list-style: none;
    color: rgb(54,159,174);
    margin-left:-25px;
  }
  .cebian li{
    font-size: 18px;
    width: 80%;
    height:80px;
    padding-top: 60px;
    cursor: pointer;
  }
 .cebian p{

    background-image: url("../assets/comm-spr.png");
    background-size: 393px 200px;
    display: block;
    margin-top:-60px;
    margin-left: 20px;
 }
 .shou{
    width: 22px;
    height: 21px;
    background-position: -216px -99px;
 }
 .dui{
    width: 22px;
    height: 21px;
    background-position: -269px -72px;
 }
 .sai{
    width: 22px;
    height: 21px;
    background-position: -220px -46px;
 }
 .yuan{
     width: 22px;
     height: 21px;
     background-position: -290px -12px;
 }
 .xin{
     width: 22px;
     height: 21px;
     background-position: -262px -99px;
    
 }
 .ding{
   width: 33px;
   height: 29px;
   background-position: -195px -12px;
 }

  .saicheng{
    position: absolute;
    width:80%;
    height:auto;
    left:10%;
    top: 20px;

    }
    .saicheng .wai{
     width: 87%;
     height: 140px;
     margin-top: 20px;
     margin-left: 80px;
     overflow:hidden
    }
  .saicheng ul{
    list-style: none;
    height: 140px;
    margin-left:-50px;
    width: 100%;
    /* margin-left:50px */
  }
  .saicheng li{
    float:left;
    width:200px;
    border: 1px solid gainsboro;
    margin-left:12px;
    height: 100%;
    line-height:160px;
    position:relative;
    border-top: 2px solid rgb(0,107,183);
  }
  .saicheng .lei{
    width:50000px;
    height:140px;
  }
  .saicheng li span {
    display:block;
    position:absolute;
  }

.left{
  position:absolute;
  width:50%;
  height:auto;
  top: 220px;
  left: 8%;
}
.banner{
  width:100%;
  height:auto;
  top: 220px;
  left: 10%;
}
.banner img{
  width:100%;
}

.paiming{
  width: 28%;
  height: 1000px;
  position: absolute;
  top: 220px;
  right: 8%;
}
.el-table th{
 line-height:20px;
 font-size: 16px;
 text-align: center;
}
.el-table td{
 text-align: center;
}

.paiming span{
  display: block;
  float: left;
  font-size: 22px;
  width:50%;
  text-align: center;
  cursor: pointer;
}
.bb{
  height: 1px;
  width: 100%;
  display:block;
  background-color: gainsboro;
}
#xi{
  display:none
}
.aa{
  width: 50%;
  height: 2px;
  background-color:rgb(0,107,183);
  position: absolute;
  top: 20px;
  z-index: 5;
}
.news{
  width:100%;
    margin-top:30px
}
.news ul{
  list-style: none;
  width: 105%;
  margin-left:-5% ;
}
.news li{
  width: 50%;
  height: 40px;
  font-size:20px;
  float: left;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor: pointer;
  /* border: 1px solid red; */
}
.newsStyle{
  font-weight:bold;
}
.news p{
  font-size: 25px;
  border-left:6px solid rgb(4,124,255);
  text-align: left;
  padding-left:10px;
}
.newshead{
   width:100%;
   position: relative;
}
.newshead span{
  display: block;
  position: absolute;
  right: 0;
  z-index: 5;
  top: 10px;
  cursor: pointer;
}
.el-icon-right{
  font-size:18px;
  color:rgb(4,124,255);
}

.shuju{
  width: 80%;
  height: 350px;
  margin-left:10%;
  margin-top: 40px;
  display: block;
}
.shuju .shujuhead{
  width: 100%;
  text-align: left;
  border-left:5px solid  red;
  font-size: 25px;
  padding-left:8px ;
  
}
.shuju p span{
   width: 100%;
   border-bottom: 2px solid red;
   display:block;
}
.shujua{
  list-style: none;
  width:20%;
  border-right:0.5px solid ghostwhite ;
  float: left;
  padding-right: 5px;
}
.shujua li {
  border-bottom:1px solid ghostwhite;
  height: 60px;
  position: relative;
 display: block;
 margin-left: -30px;
}
.shujua li img{
  width: 140px;
}
.shujua li .sortimg{
  position: absolute;
  width: 66px;
  left: 0;
  bottom: 0px;
}
.shujua li p{
  position: absolute;
}




</style>

